import React, { } from 'react'
import { Form, Row, Col, Button, Input, DatePicker, InputNumber } from 'antd'
import style from './Index.module.less'
import moment from 'moment'
const { Item } = Form
const layout = {
  labelCol: { flex: '100px' }
}

function getCondition (d, onChange) {
  const condition = []
  if (d.year) {
    condition.push({ k: 'year', o: '=', v: d.year })
  }
  if (d.operator) {
    condition.push({ k: 'operator', o: 'like', v: `%${d.operator}%` })
  }
  if (d.begin) {
    const t = Math.floor((moment(`${d.begin.format('YYYY-MM-DD')} 00:00:00`)).valueOf() / 1000)
    condition.push({ k: 'create_datetime', o: '>=', v: t })
  }
  if (d.end) {
    const t = Math.floor((moment(`${d.end.format('YYYY-MM-DD')} 23:59:59`)).valueOf() / 1000)
    condition.push({ k: 'create_datetime', o: '<=', v: t })
  }
  onChange(condition)
}

function Main ({ onChange }) {
  const [formRef] = Form.useForm()
  return (
    <div className={style['search-container']}>
      <div className={style['search-form']}>
        <Form form={formRef} {...layout} onFinish={d => getCondition(d, onChange)} onReset={d => formRef.submit()}>
          <Row gutter={24}>
            <Col span={8}>
              <Item name='year' label='年份'>
                <InputNumber placeholder='请输入' className={style.full} />
              </Item>
            </Col>
            <Col span={8}>
              <Item name='operator' label='上报人'>
                <Input placeholder='请输入' allowClear />
              </Item>
            </Col>
            <Col span={8}>
              <Item name='begin' label='上报开始时间'>
                <DatePicker placeholder='请选择' allowClear className={style.full} />
              </Item>
            </Col>
            <Col span={8}>
              <Item name='end' label='上报结束时间'>
                <DatePicker placeholder='请选择' allowClear className={style.full} />
              </Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={24}>
              <Item>
                <div className={style['search-btns']}>
                  <Button type='primary' ghost htmlType='submit'>搜索</Button>
                  <Button htmlType='reset' onClick={() => formRef.resetFields()}>重置</Button>
                </div>
              </Item>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
  )
}

export default Main
